<template>
  <div class="home">
    <el-card shadow="never">
      <el-row>
        <el-col :span="24"
          ><div id="div11" class="grid-content bg-purple-dark">
            <span>场馆列表</span>
          </div></el-col
        >
      </el-row>
      <div id="div1">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="venuename" placeholder="搜索场馆名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="chaxun">查询</el-button>
          </el-form-item>
          <!-- 添加场馆按钮   -->
          <el-form-item>
            <el-button type="primary" >
               <router-link tag="span" to="/addvenue">添加场馆</router-link>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div id="div2">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="name" label="场馆名称" width="200">
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="300">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="200">
          </el-table-column>
          <el-table-column prop="sort" label="排序" width="200">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="300">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <!-- 表格里面的编辑按钮 -->
               <el-button type="text" size="small"  >
        <router-link tag="span" to="/editvenue"
        @click.native.prevent="edit(scope.$index, tableData)" 
        >编辑</router-link>
        </el-button>
            <!-- 表格里面的删除按钮 -->
              <el-button @click.native.prevent="del(scope.$index, tableData)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 放页面的地方 -->
      <div id="div3">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="limit"
          :total="total"
          @current-change="change"
         
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

  
   
<script>
export default {
  //页面一加载就进行描绘页面的事件
  mounted() {
    this.getCon();
  },

  methods: {
    handleClick(row) {
      console.log(row);
    },
    //页面点击事件
    change(page) {
      this.page = page;
      this.getCon();
    },
   
    //点击编辑的时候保存这行所对应的id
    edit(index, data) {
      console.log(index, data);
      console.log(data[index].id);
      //保存id到sessionStorage里面
      sessionStorage.setItem("id", data[index].id);
    },

    //描绘页面
    getCon() {
      this.$axios({
        url: "/gym/venue/list",
        method: "post",
        data: {
          limit: this.limit,
          page: this.page,
        },
      }).then((res) => {
        if (res.data.code != 200) {
          this.$message.error("显示失败");
        } else {
          this.$message.success("显示成功");
          console.log(res.data)
          this.tableData = res.data.data;
           this.total=res.data.count
        }
      });
    },
    //查询按钮那里的事件,还没测
    chaxun() {
      this.$axios({
        url: "/gym/venue/list",
        method: "post",
        data: {
          name: this.venuename,
        },
      }).then((res) => {
        if (res.data.code != 200) {
          this.$message.error("查询失败");
        } else {
          this.$message.success("查询成功");
          this.tableData = res.data.data;
          this.total=res.data.count;
        }
      });
    },

    //删除一个场馆
    del(index, data) {
      this.$confirm("此操作将永久这条内容？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios({
          url: "/gym/venue/deleteById",
          method: "post",
          data: {
            id: data[index].id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("该场馆删除成功");
            this.getCon()
          } else {
            this.$message.error("该场馆删除成功");
          }
        });
      });
    },
  },

  data() {
    return {
      venuename: "", //场馆名字查询场地
      page: 1, //当前页数
      limit: 5, //当前每一页展示的条数
      total:0,
      input: "",
      con: "", //input框搜索关键词那里
      tableData: [],
    };
  },
};
</script>
<style scoped>
#div1 {
  margin-top: 20px;
  margin-left: 20px;
  float: left;
  overflow: hidden;
}

#div2 {
  margin-left: 20px;
}
#div3 {
  text-align: right;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #606266;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-col #div11 {
  position: relative;
  height: 50px;
}
#div11 > span {
  display: block;
  position: absolute;
  float: left;
  margin-left: 20px;
  margin-top: 15px;
}
</style>
